<template>
  <el-dialog v-model="showDialog" title="新增规格" width="800px" destroy-on-close :close-on-click-modal="false"
    @opened="handleOpened" @closed="handleClosed">
    <el-form :model="form" :label-width="120" ref="formRef">
      <product-select-store-product :options="storeProducts" @change="selectStoreProducts"></product-select-store-product>
      <template v-if="selectedStoreProduct">
        <slot name="form-item" :form="form" :selectStoreProducts="selectStoreProducts">
          <product-name v-model:model-value="form.name"></product-name>
          <product-thumbnail-url v-model:model-value="form.thumbnailUrl"></product-thumbnail-url>
          <product-original-price-readonly label-str="供货价" :value="selectedStoreProduct.costPrice" />
          <product-sale-price v-model:model-value1="form.payOfCurrencyCount"
            v-model:model-value2="form.payPrice"></product-sale-price>
          <product-add-stock-count v-model:model-value="form.addOrDeductionStockCount"
            :store-row="selectedStoreProduct"></product-add-stock-count>
        </slot>
      </template>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button @click="handleConfirm" type="primary">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { IGoodsPageRow } from "@/api/modules/pointsMall";
import { useAddProduct } from "@/components/goodsCenter/compositions/useAddProduct";
import ProductSelectStoreProduct from "@/components/goodsCenter/addProductFormItem/ProductSelectStoreProduct.vue";
import ProductName from "@/components/goodsCenter/addProductFormItem/ProductName.vue";
import ProductThumbnailUrl from "@/components/goodsCenter/addProductFormItem/ProductThumbnailUrl.vue";
import ProductAddStockCount from "@/components/goodsCenter/addProductFormItem/ProductAddStockCount.vue";
import ProductSalePrice from "@/components/goodsCenter/addProductFormItem/ProductSalePrice.vue";


const props = withDefaults(defineProps<{
  show: boolean,
  formProps: string[], // 标识form中的item项都有哪些，会影响初始化时的格式化，提交时的格式化
  storeProductsUrl: string,
  submitUrl: string, // 提交时的API地址
  rowData: IGoodsPageRow,
}>(), {
  show: false,
  formProps: () => [],
  storeProductsUrl: '',
  submitUrl: ''
})
const emits = defineEmits(['update:show', 'confirm', 'cancel'])
const showDialog = computed({
  get() {
    return props.show
  },
  set(val) {
    return emits("update:show", val)
  }
})

const { form, formRef, storeProducts, getStoreProducts, selectStoreProducts, selectedStoreProduct, submit } = useAddProduct()

const handleConfirm = () => {
  submit(props.submitUrl, form, { rowData: props.rowData, formProps: props.formProps })
    .then(() => {
      console.log('submit then')
      showDialog.value = false
      emits('confirm')
    })
}

const handleCancel = () => {
  showDialog.value = false
}

const handleOpened = () => {
  getStoreProducts(props.storeProductsUrl, { id: props.rowData.storeGoodsId })
}

const handleClosed = () => {
  formRef.value?.resetFields()
  selectStoreProducts(null)
}
</script>

<style scoped lang="scss"></style>
